$(function () {
  innitArtCateList();
  //获取服务器数据渲染文章分类下拉列表
  function innitArtCateList(){
    axios({
      url:'/my/article/cates',
    }).then(res=>{
      if(res.data.status!=0){
        return layui.layer.msg(res.data.message)
      }
      let arr = ['<option value="">请选择文章所属分类</option>']
      res.data.data.forEach(val=>{
        arr.push(`
        <option value="${val.Id}">"${val.name}</option>
        `)
      })
      $('[name=cate_id]').empty().html(arr.join(''))
      layui.form.render()
    })
  }
  //初始化富文本框
  initEditor()
  // 1. 初始化图片裁剪器
  var $image = $('#image')
  // 2. 裁剪选项
  var options = {
    aspectRatio: 400 / 280,
    preview: '.img-preview'
  }
  // 3. 初始化裁剪区域
  $image.cropper(options)

  let state = ''
  $('#btn1').on('click',function(){
    state = '已发布'
  })
  $('#btn2').on('click',function(){
    state = '草稿'
  })

  //表单 的提交事件
  $('#form-pub').on('submit',function(e){
    e.preventDefault()
    let fd = new FormData(this)
    fd.append('state',state)

    $image
    .cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
      width: 400,
      height: 280
    })
    .toBlob(function(blob) {// 将 Canvas 画布上的内容，转化为文件对象
      // 得到文件对象后，进行后续的操作
      fd.append('cover_img',blob)
      console.log(...fd)
      //发送ajax
      axios({
        method:'post',
        url:'/my/article/add',
        data:fd,
      }).then(res=>{
        if(res.data.status!=0){
          return layui.layer.msg(res.data.message)
        }
        layui.layer.msg(res.data.message)
        setTimeout(function(){
          window.parent.document.querySelector('#art_list').click()
        },2000)
      })
    });

  })

  //选择文章封面
  $('#chooseImgBtn').on('click',function(){
    $('#chooseImgInp').click()
  })
  $('#chooseImgInp').on('change',function(e){
    var file = e.target.files[0]//拿到用户选择的文件
    var newImgURL = URL.createObjectURL(file)//根据选择的文件，创建一个对应的 URL 地址
    $image
      .cropper('destroy')      // 销毁旧的裁剪区域
      .attr('src', newImgURL)  // 重新设置图片路径
      .cropper(options)        // 重新初始化裁剪区域
  })

})